<template>
    <div class="doc-content-wrapper">
        <div class="doc-content-container">
            <div class="doc-content">
                <h2 class="mb-5 flex items-center">查找匹配修改数组对象</h2>
                <Codemirror :code="array1Code" name="forEach查找匹配修改数组对象" class="mb-10" />
                <Codemirror :code="array2Code" name="map查找匹配修改数组对象" class="mb-10" />
                <Codemirror :code="array3Code" name="reduce查找匹配修改数组对象" class="mb-10" />
                <Codemirror :code="array4Code" name="findIndex查找匹配修改数组对象" class="mb-10" />
                <Codemirror :code="array5Code" name="filter查找匹配修改数组对象" class="mb-10" />
                <Codemirror :code="array6Code" name="find查找匹配返回新对象" class="mb-10" />
                <Codemirror :code="array7Code" name="filter查找匹配返回新数组对象" class="mb-10" />
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
    setup () {
        const array1Code = ref(`const Object = [ 
    {key:'name1', text:'名字1'},
    {key:'name2', text:'名字2'},
    {key:'name3', text:'名字3'},
    {key:'name4', text:'名字4'}
]

    Object.forEach(e => {
       if ( e.key == 'name1') {
           e.text='老黄'
       }
    });

console.log(JSON.stringify(Object));`)

        const array2Code = ref(`const Object = [ 
    {key:'name1', text:'名字1'},
    {key:'name2', text:'名字2'},
    {key:'name3', text:'名字3'},
    {key:'name4', text:'名字4'}
]

    Object.map((item)=>{
        if (item.key == 'name1') {
            item.text= '老黄'
        }
    })

console.log(JSON.stringify(Object));`)

        const array3Code = ref(`const Object = [ 
    {key:'name1', text:'名字1'},
    {key:'name2', text:'名字2'},
    {key:'name3', text:'名字3'},
    {key:'name4', text:'名字4'}
]

    Object.reduce((item)=>{
        if (item.key == 'name1') {
            item.text= '老黄'
        }
        return item
    })

console.log(JSON.stringify(Object));`)

        const array4Code = ref(`const Object = [ 
    {key:'name1', text:'名字1'},
    {key:'name2', text:'名字2'},
    {key:'name3', text:'名字3'},
    {key:'name4', text:'名字4'}
]

    Object.findIndex((i=>{
        if (i.key=='name1') {
            i.text = '老黄'
        }
    }))

console.log(JSON.stringify(Object));`)

        const array5Code = ref(`const Object = [ 
    {key:'name1', text:'名字1'},
    {key:'name2', text:'名字2'},
    {key:'name3', text:'名字3'},
    {key:'name4', text:'名字4'}
]

    Object.filter((i=>{
        if (i.key=='name1') {
            i.text = '老黄'
        }
    }))

console.log(JSON.stringify(Object));`)

        const array6Code = ref(`const Object = [ 
    {key:'name1', text:'名字1'},
    {key:'name2', text:'名字2'},
    {key:'name3', text:'名字3'},
    {key:'name4', text:'名字4'}
]

    let xxx = Object.find((e) => e.key === 'name2')
    xxx.text= '薯条'
    console.log(JSON.stringify(xxx),'---> 新对象');

console.log(JSON.stringify(Object));`)

        const array7Code = ref(`const Object = [ 
    {key:'name1', text:'名字1'},
    {key:'name2', text:'名字2'},
    {key:'name3', text:'名字3'},
    {key:'name4', text:'名字4'}
]

    let xxx = Object.filter((e) => e.key === 'name2')
    xxx.text= '薯条'
    console.log(JSON.stringify(xxx),'---> 新数组对象');

console.log(JSON.stringify(Object));`)

        return {
            array1Code,
            array2Code,
            array3Code,
            array4Code,
            array5Code,
            array6Code,
            array7Code,
        }
    }
})
</script>

<style scoped>

</style>